<script setup lang="ts">
import { ref } from 'vue'
import LandscapePage from './components/LandscapePage.vue'
import cover1 from '@/assets/image/1.jpg'
import cover2 from '@/assets/image/2.jpg'
import cover3 from '@/assets/image/3.jpg'
import cover4 from '@/assets/image/4.jpg'
import cover5 from '@/assets/image/5.jpg'
import cover6 from '@/assets/image/6.jpg'
import cover7 from '@/assets/image/7.jpg'
import cover8 from '@/assets/image/8.jpg'

const showLandscape = ref(false)

const toggleView = () => {
  showLandscape.value = !showLandscape.value
}

const handleBack = () => {
  showLandscape.value = false
}

const games = [
  {
    id: 'nebula-awakening',
    title: '农村大作战',
    cover: cover1,
    link: 'https://yxku.7baidu.cc/cocos/nongchangdazuozhan/'
  },
  {
    id: 'blade-arena',
    title: '泡泡龙',
    cover: cover2,
    link: 'https://yxku.7baidu.cc/cocos/paopaolong/'
  },
  {
    id: 'wander-dream',
    title: '花朵消除',
    cover: cover3,
    link: 'https://yxku.7baidu.cc/cocos/huoduoxiaochu/'
  },
  {
    id: 'overdrive-zero',
    title: '接诗词(简易)',
    cover: cover7,
    link: 'https://game.hfylx.top/'
  },
  {
    id: 'overdrive-zero',
    title: '麻将对对碰',
    cover: cover4,
    link: 'https://yxku.7baidu.cc/cocos/majiangchipenggang2D/'
  },
  {
    id: 'overdrive-zero',
    title: '花了个花',
    cover: cover5,
    link: 'https://bj.suyucloud.cn/box/pro_unity003/index.html'
  },
  {
    id: 'overdrive-zero',
    title: '大冒险',
    cover: cover6,
    link: 'https://bj.suyucloud.cn/box/web001/index.html'
  },
  {
    id: 'overdrive-zero',
    title: '猫咪养成记',
    cover: cover8,
    link: 'https://bj.suyucloud.cn/box/MatCat/index.html'
  }
]

const feature = {
  title: '核心技术方案',
  description:
    '使用 Cocos 与 Unity 主流引擎，结合链实智能科技自主研发的实时框架，为品牌提供即插即用的定制能力。',
  highlights: ['Cocos 集成', 'Unity 扩展', '链实实时同步'],
  badge: '2025 NEW'
}
</script>

<template>
  <!-- 横屏页面 -->
  <LandscapePage v-if="showLandscape" @back="handleBack" />
  
  <!-- 原首页（默认显示） -->
  <div v-else class="page">
    <div class="page__glow page__glow--one" />
    <div class="page__glow page__glow--two" />

    <header class="hero">
      <div class="hero__top">
        <h1>链实智能科技</h1>
        <button class="view-toggle-btn" @click="toggleView" title="切换到横屏视图">
          <span>🔄</span>
          <span>横屏</span>
        </button>
      </div>
    </header>

    <section class="feature">
      <div class="feature-card">
        <div class="feature-card__info">
          <h2>{{ feature.title }}</h2>
          <p>{{ feature.description }}</p>
          <div class="feature-card__chips">
            <span v-for="chip in feature.highlights" :key="chip">{{ chip }}</span>
          </div>
        </div>
        <div class="feature-card__visual">
          <div class="visual-orbit" />
          <div class="visual-core">
            <span>链实智能科技</span>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="section__head">
        <div>
          <h3>精选 Demo 列表</h3>
        </div>
        <span class="section__tag">Game Gallery</span>
      </div>

      <p class="section__hint">首次加载可能会较为缓慢，请您耐心等待。</p>

      <div class="game-grid">
        <a
          v-for="game in games"
          :key="game.id"
          class="game-card"
          :href="game.link"
          target="_blank"
          rel="noopener"
          :style="{ '--cover-image': `url(${game.cover})` }"
        >
          <div class="game-card__media" />
          <div class="game-card__body">
            <h4>{{ game.title }}</h4>
          </div>
        </a>
      </div>
    </section>

    <footer class="footer">
      <div class="footer__info">
        <span>链实智能科技 · ChainReal Labs</span>
      </div>

    </footer>
  </div>
</template>

<style scoped>
.page {
  position: relative;
  min-height: 100vh;
  padding: 64px 24px 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 48px;
  color: #f2f5ff;
}

.page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(7, 12, 40, 0.88), rgba(8, 40, 80, 0.65));
  z-index: -3;
}

.page__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.8;
  z-index: -2;
  pointer-events: none;
}

.page__glow--one {
  top: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(87, 129, 255, 0.75), transparent 60%);
}

.page__glow--two {
  bottom: -200px;
  right: -140px;
  background: radial-gradient(circle, rgba(255, 94, 150, 0.7), transparent 60%);
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hero h1 {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
  flex: 1;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(108, 140, 255, 0.4);
  background: rgba(90, 120, 255, 0.18);
  color: rgba(214, 226, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.view-toggle-btn:hover {
  background: rgba(90, 120, 255, 0.28);
  border-color: rgba(108, 140, 255, 0.6);
  transform: translateY(-2px);
}

.view-toggle-btn:active {
  transform: translateY(0);
}

.view-toggle-btn span:first-child {
  font-size: 16px;
}

.feature {
  display: flex;
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(18, 32, 68, 0.65);
  border: 1px solid rgba(108, 140, 255, 0.35);
  box-shadow: 0 32px 60px rgba(12, 24, 60, 0.45);
  overflow: hidden;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: -40% 20% auto -20%;
  height: 260px;
  background: radial-gradient(circle, rgba(87, 255, 227, 0.28), transparent 70%);
  filter: blur(90px);
  z-index: -1;
}

.feature-card__info h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.feature-card__info p {
  margin: 0 0 20px;
  font-size: 14px;
  color: rgba(205, 220, 255, 0.8);
  line-height: 1.7;
}

.feature-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-card__chips span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(90, 120, 255, 0.18);
  border: 1px solid rgba(135, 165, 255, 0.4);
  font-size: 12px;
  color: rgba(214, 226, 255, 0.92);
  letter-spacing: 0.03em;
}

.feature-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-orbit {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(from 130deg, rgba(93, 130, 255, 0.35), rgba(255, 128, 190, 0.65), rgba(87, 200, 255, 0.35));
  filter: blur(24px);
  animation: spin 14s linear infinite;
}

.visual-orbit::after {
  content: '';
  position: absolute;
  inset: -35px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 200, 255, 0.25), rgba(120, 200, 255, 0), rgba(255, 140, 210, 0.2));
  filter: blur(28px);
  opacity: 0.45;
  animation: glowPulse 6s ease-in-out infinite;
}

.visual-core {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(136, 160, 255, 0.6));
  border: 1px solid rgba(186, 205, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #071138;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visual-core::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(38, 58, 148, 0.35);
}

.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.section__head h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.section__head p {
  margin: 0;
  font-size: 14px;
  color: rgba(193, 210, 255, 0.75);
}

.section__tag {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(96, 124, 235, 0.16);
  border: 1px solid rgba(135, 165, 255, 0.3);
  color: rgba(219, 228, 255, 0.85);
}

.section__hint {
  margin: -6px 0 12px;
  font-size: 13px;
  color: rgba(193, 210, 255, 0.6);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: rgba(13, 27, 66, 0.65);
  border: 1px solid rgba(101, 132, 255, 0.28);
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(7, 14, 46, 0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-decoration: none;
  color: inherit;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: -40% -40% 40% -40%;
  background: radial-gradient(circle, rgba(120, 180, 255, 0.45), transparent 70%);
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.game-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px rgba(9, 18, 60, 0.6);
}

.game-card:hover::before {
  opacity: 0.95;
}

.game-card__media {
  position: relative;
  padding-top: 110%;
  background-image: var(--cover-image);
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.game-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(3, 10, 28, 0.7));
}


.game-card__body {
  position: relative;
  z-index: 1;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.game-card__body h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  border-radius: 24px;
  background: rgba(10, 24, 58, 0.7);
  border: 1px solid rgba(108, 140, 255, 0.28);
  box-shadow: 0 24px 60px rgba(5, 12, 42, 0.5);
  text-align: center;
}

.footer__info span {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(176, 190, 255, 0.7);
}

.footer__cta {
  align-self: center;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #051132;
  background: linear-gradient(120deg, #7fe7ff, #9d89ff, #ff8ad8);
  box-shadow: 0 12px 30px rgba(108, 140, 255, 0.45);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(108, 140, 255, 0.5);
}

.footer__cta:active {
  transform: translateY(0);
}

.footer__copyright {
  margin: 0;
  font-size: 12px;
  color: rgba(150, 170, 220, 0.6);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glowPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.35;
  }
}

@media (max-width: 520px) {
  .page {
    padding: 48px 18px 80px;
    gap: 36px;
  }

  .feature-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature-card__visual {
    min-height: 200px;
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .game-grid {
    grid-template-columns: 1fr;
  }

  .hero__badge {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
